<template>
	<!--关于-->
	<view class="about-box" :class="show === 0 ? 'none' : show === 1 ? 'show' : ''">
		<view class="about-content">
			<view class="item-fixed-top">
				<view class="title">{{title}}</view>
				<view class="close" @click="closeWin">
					<image src="../../static/images/close.png" mode="aspectFill"></image>
				</view>
			</view>
			
			<view  v-for="(item,index) in list" :key="index" @click="onClickItem(item)">
				<view class="item-box">
					<view class="txt" :class="curId == item.id ? 'txt-c' : ''">{{item.title}}</view>
					<text class="icon-font sele-icon">{{curId == item.id ? '&#xe636;' : '' }}</text>
				</view>
			</view>
			<view class="btn" @click="confim">确 定</view>
		</view>
	</view>
</template>

<script>
	
	export default {
	  	data() {
			return {
				title:"",
				show : 0,
				list:[],
				callBack:null,
				curId:-1,
			};
		},
		
		watch:{

		},
		
		methods: {
			/***显示about***/
			showWin(type,data)
			{	
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.show = 2;
				setTimeout(() => {
					this.show = state;
				}, timer);
				if(!type)return;
				this.dataHandler(data);
			},
			
			dataHandler(data)
			{
				if(data.titleType == 0)
				{
					this.title = "请选择打印门店"
				}
				else
				{
					this.title = "请选择打印仓库"
				}
				this.list = data.data;
				this.callBack = data.callBack;
				console.log("list===:",this.list);
			},
			
			/***关闭about***/
			closeWin()
			{
				this.curId = -1;
				this.showWin();
			},
			
			onClickItem(item)
			{
				//console.log(item.id);
				console.log(item);
				this.curId = item.id;
			},
			
			confim()
			{
				if(this.callBack != null)
				{
					console.log(this.curId);
					this.callBack.apply(null,[this.curId]);//(this.curId);
					this.callBack = null;
				}
				this.closeWin();
			},
		}
	}
</script>
<style lang="scss">
	.about-box {
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		transition: 0.3s;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.about-content {
			border-radius: 6px;
			overflow: hidden;
			width: 30%;
			background: #FFF;
			float: right;
			transform: translateY(-100%);
			transition: 0.3s;
			.item-fixed-top
			{
				padding: 10px 0 10px 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFF;
				font-size: 18px;
				border-bottom: 1px solid #ddd;
				.close
				{
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
			}
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.3);
			.about-content {
				transform: translateY(0);
			}
		}
		.item-box
		{
			display: flex;
			align-items: center;
			background: #FFF;
			padding: 4px 20px;
			cursor: pointer;
			position: relative;
			.txt
			{
				color: #333;
				// padding: 10px ;
				font-size: 14px;
			}
			.txt:last-child
			{
				border-bottom: none;
			}
			
			.txt-c
			{
				color: #3388ff;
			}
			.sele-icon
			{
				color: #3388ff;
				font-size: 30px;
				position: absolute;
				right: 10px;
				top:-10px;
			}
			border-bottom: 1px solid #EEE;
		}
		
		.btn
		{
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			cursor: pointer;
			color: #fff;
			background-color: #3388ff;
		}
		.btn:hover
		{
			background-color: #2e7be7;
		}
	}
	
</style>